<template>
    <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" theme="dark" mode="inline"
        :items="MenuStoue.MenuData" @click="handleClick">
    </a-menu>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { UseMenuStore } from '@/@base/store/Menu';

const MenuStoue = UseMenuStore();
const selectedKeys = ref([]);
const openKeys = ref([]);
const Route = useRoute();
watch(() => Route, (value) => {
    selectedKeys.value = [value.path];
    value.matched.forEach(item => {
        if (!openKeys.value.includes(item.path)) {
            openKeys.value.push(item.path);
        }
    });
}, { deep: true, immediate: true })
const Router = useRouter();
const handleClick = function ({ item }) {
    if (item.path) {
        Router.push(item.path);
    }
}
</script>
<style scoped lang="less"></style>